<template>
    <div class="tree-menu">
        <el-menu-item-group v-for="(item,index) in treeData" :key='index'>
            <el-submenu :index="item.id" v-if="item.children">
                <template slot="title">
                    <span class="iconfont icon-yonghuguanli icon-side"></span>
                    <span>{{item.title}}</span>
                </template>
                <template >
                    <tree-menu :treeData='item.children' :fatherName='item.title'/>
                </template>
            </el-submenu>
            <el-menu-item :index="item.id" @click="clickMenu(item.path,item.title)" v-else>
                <span :class="item.iconClassName"></span>
                <span slot="title" class="titleColor">{{item.title}}</span>
            </el-menu-item>
        </el-menu-item-group>
    </div>
</template>

<script>
import "@/assets/css/menu/font_zcer37szldf/iconfont.css";
export default {
    name: 'treeMenu',
    props: ['treeData'],
    data () {
        return {

        }
    },
    methods: {
        clickMenu (path,name) {
            this.$router.push(path)
            let changeBread = {
                level1: {
                    name: this.$attrs.fatherName || '',
                    path,
                },
                level2: {
                    name,
                    path: this.$route.fullPath,
                },
                level3: {
                    name: "详情",
                    path: "",
                },
            };
            this.$store.dispatch("breadAbout/changeBread", changeBread);
        }
    },
};
</script>

<style lang='scss' scoped>
// .side-left {
//   height: 730px;
// }
// .el-menu-vertical-demo {
//   width: 200px;
//   min-width: 200px;
//   height: 100%;
//   .side-item {
//     width: 180px !important;
//   }
// }
// .icon-side {
//   margin-right: 5px;
// }
// .aside-title {
//   height: 50px;
//   font-size: 15px;
//   color: white;
//   text-align: center;
//   line-height: 50px;
// }
</style>